{% macro render_entity_link (entity, mbid, name) %}
  {%- if mbid is defined and mbid is not none -%}
    <a href="https://listenbrainz.org/{{ entity }}/{{ mbid }}" target="_blank">
      {{ name|upper|e }}
    </a>
    <title>{{ name|e }}</title>
  {%- else -%}
    {{ name|upper|e }}
    <title>{{ name|e }}</title>
  {%- endif -%}
{% endmacro %}

{% macro render_image_link(entity, image, show_caption) %}
  {% if image.entity_mbid %}
  <a href="https://listenbrainz.org/{{ entity }}/{{ image.entity_mbid }}" target="_blank">
  {% endif %}
    <image
        x="{{ image.x }}"
        y="{{ image.y }}"
        width="{{ image.width }}"
        height="{{ image.height }}"
        preserveAspectRatio="xMidYMid slice"
        href="{{ image.url }}"
        clip-path="url(#clip-{{ image.x }}-{{ image.y }})"
    >
        {% if image.title and image.artist %}
        <title>
          {{- image.title|escape ~ " - " ~ image.artist|escape -}}
        </title>
        {% endif %}
    </image>
    <clipPath id="clip-{{ image.x }}-{{ image.y }}">
      <rect
        x="{{ image.x }}"
        y="{{ image.y }}"
        width="{{ image.width }}"
        height="{{ image.height }}">
      </rect>
    </clipPath>
    {% if show_caption and (image.title or image.artist) %}
      <g class="caption" transform="translate({{ image.x }}, {{ image.y + image.height - 30 }})">
        <rect fill="#0000007a" width="{{image.width}}" height="30" ></rect>
        <text fill="white" font-weight="normal" font-size="12" font-family="Sintony, sans-serif">
          <tspan x="5" y="13">
            {{- image.title|escape -}}
          </tspan>
          <tspan x="5" dy="13">
            {{- image.artist|escape -}}
          </tspan>
        </text>  
      </g>
    {% endif %}
  {% if image.entity_mbid %}
  </a>
  {% endif %}
{% endmacro %}
